<template>
  <div id="app">
    <Sub ref="sub" @inputMessage="handleMessage" :placevalue="placevalue" />     <!-- 一、子组件事件inputMessage，传递给父组件函数handleMessage -->
                                                                                 <!-- 三、父组件必须用这个:prop名字，把数据传递给子组件，且保持双向绑定 -->
    <p>
      <div> 输入的内容: {{ text }} </div>
      <button @click="callApiMethod">Call API method</button>
    </p>

    <p>
      <button @click="changePlacevalue">Change Placevalue</button><br />
      Placevalue: {{ placevalue }}
    </p>
  </div>
</template>

<script>
import Sub from './components/Sub.vue'

export default {
  name: 'App',
  components: {
    Sub
  },
  data() {
    return {
      text: '',
      placevalue: 'placetext'
    }
  },
  methods: {
    handleMessage(message) {      // 一、使用了子组件事件的参数
      this.text = message
    },
    callApiMethod() {
      this.$refs.sub.apiMethod(this.$refs.sub.internalvalue)    // 二、通过refs，访问子组件的数据和方法
    },
    changePlacevalue(){         
      this.placevalue = 'new placetext'   // 三、父组件改变placevalue，子组件的prop会自动更新
    }
  }
}
</script>

<style scoped>
</style>
